$(function(){

    // 创建一个数组，用来保存图片的路径
    let kongArr = []

    // 获取传入接口的变量
    let proId = location.href.split('?')[1].split('=')[1]
    $.ajax({
        method:'get',
        async:false,
        url:`http://chst.vip:1234/api/getcouponproduct?couponid=${proId}`,
        success:function(val){
            let res = val.result
            let lisStr = ``
            res.forEach((element,index) => {
                
                kongArr.push(element.couponProductImg.match(/[0-9a-zA-Z:/._-]+/g)[2])
                lisStr+=`   <li imgnum=${index}>
                                <img src=${element.couponProductImg.match(/[0-9a-zA-Z:/._-]+/g)[2]} alt="">
                                <div class="righttext">
                                    <p>${element.couponProductName}</p>
                                    <h2>${element.couponProductPrice}</h2>
                                    <h5>${element.couponProductTime}</h5>
                                </div>
                            </li>`
            });
            $('main ul').html(lisStr)
        }
    })

     //  定义变量，实现防抖效果
     let flag = false
   
  
    // 当点击li的时候，需要让Lbt元素和出现,同时，Lbt元素中的img等于被点击的li中的图片
    $('main ul li').click(function(){

        
        
        // 定义点击时图片索引
        let nowindex = +$(this).attr('imgnum')
        
        // 将图片克隆
        $('.Lbt .box .picshow .imgmove').html($(this).find('img').clone())


        $('.Lbt .box .picshow .imgmove img').css('left',0)

        $('.Lbt').slideDown(500)
        // 点击取消按钮时，让Lbt元素收起
        $('.Lbt .box span').click(function(){
            $('.Lbt').slideUp(500)
        })
        


         
        // 当点击左右按钮时，切换图片
        $('.Lbt .box .left').click(function(){

            // 当点击了以后，更改变量为true,如果true表示正在执行，那就直接return
           
            if(flag){
                return
            }

            nowindex--
            if(nowindex==-1){
                nowindex=0
                return
            }
            flag = true
           
            $('.Lbt .box .picshow .imgmove img').before($(`<img src=${kongArr[nowindex]}></img>`))
            $('.Lbt .box .picshow .imgmove img:eq(0)').css('left','-1.67rem')
            $('.Lbt .box .picshow .imgmove img:eq(0)').animate({left:'0rem'},1000).next().animate({left:'1.67rem'},1000,function(){
               flag = false
            })
            setTimeout(()=>{
                $('.Lbt .box .picshow .imgmove img:eq(1)').remove()
            },1000)
        })

        $('.Lbt .box .right').click(function(){
            nowindex++  
            if(flag){
                return
            }
            flag = true
           
            if(nowindex == kongArr.length+1){
                nowindex =  kongArr.length
            }
            $('.Lbt .box .picshow .imgmove img').after($(`<img src=${kongArr[nowindex+1]}></img>`))
            $('.Lbt .box .picshow .imgmove img:eq(1)').css('left','1.67rem')
            $('.Lbt .box .picshow .imgmove img:eq(0)').animate({left:'-1.67rem'},1000).next().animate({left:0},1000,function(){
                flag = false
            })
            setTimeout(()=>{
                 $('.Lbt .box .picshow .imgmove img:eq(0)').remove() 
            },1000)
        })
    })


})